import { useEffect, useState } from 'react'
import axios from 'axios'
import { Divider, Radio, Table, Space, Switch, Modal, Button, Form, Input, message, Spin } from 'antd';
import type { TableColumnsType, TableProps } from 'antd';
import { EditOutlined, DeleteOutlined, CheckCircleOutlined, BulbOutlined } from '@ant-design/icons'
import '../../mock'
import { useGetPostsQuery } from '../../store/apiSlice.js'
interface DataType {
	[x: string]: string;
	name: string;
	address: string;
}
const Index = () => {
	const {
		data: posts,
		isLoading,
		isSuccess,
		isError,
		error
	} = useGetPostsQuery()
	let content
	if (isLoading) {
		content = <Spin />
	} else if (isSuccess) {
		content = posts.map((post: any) => <PostExcerpt key={post.id} post={post} />)
	} else if (isError) {
		content = <div>{error.toString()}</div>
	}
	const columns: TableColumnsType<DataType> = [
		{
			title: '角色昵称',
			dataIndex: 'nickName',
			render: (text: string) => <a>{text}</a>,
		},
		{
			title: '用户昵称',
			dataIndex: 'userName',
			render: (text: string) => <a>{text}</a>,
		},
		{
			title: '部门',
			dataIndex: 'deptName',
		},
		{
			title: '手机号',
			dataIndex: 'phonenumber',
		},
		{
			title: '状态',
			dataIndex: 'status',
			render: (_, record) => (
				<Switch defaultChecked checked={record.status === 0 ? true : false} />
			),
		},
		{
			title: '创建时间',
			dataIndex: 'createTime',
		},
		{
			title: '操作',
			key: 'action',
			render: (_, record) => (
				<Space size="middle">
					<a><EditOutlined style={{ color: 'aqua', fontSize: 18 }} onClick={() => editRole(record)} /></a>
					<a><DeleteOutlined style={{ color: 'aqua', fontSize: 18 }} /></a>
					<a><CheckCircleOutlined style={{ color: 'aqua', fontSize: 18 }} /></a>
					<a><BulbOutlined style={{ color: 'aqua', fontSize: 18 }} /></a>
				</Space>
			),
		},
	];
	const [userList, setUserList] = useState<any>([])
	const [selectionType, setSelectionType] = useState<'checkbox' | 'radio'>('checkbox');
	const [isModalOpen, setIsModalOpen] = useState(false);
	const [isTitle, setIsTitle] = useState<boolean>(true)
	const [userId, setUserId] = useState<number>()
	const [form] = Form.useForm()
	const getsuerList = async () => {
		const res = await axios.post('/api/userList')
		const { status, data } = res
		if (status === 200) {
			setUserList(data.tableList)
		}
	}
	const handleOk = () => {
		setIsModalOpen(false);
	};

	const handleCancel = () => {
		setIsModalOpen(false);
	};
	useEffect(() => {
		getsuerList()
	}, [])
	console.log(userList)
	const rowSelection: TableProps<DataType>['rowSelection'] = {
		onChange: (selectedRowKeys: React.Key[], selectedRows: DataType[]) => {
			console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);

		},
	};
	// 点击新增
	const addRole = () => {
		setIsTitle(true)
		setIsModalOpen(true)
		form.setFieldsValue('')
	}
	// 点击修改
	const editRole = (record: any) => {
		setIsTitle(false)
		setIsModalOpen(true)
		// console.log(record)
		setUserId(record.userId)
		form.getFieldsValue(record)
	}
	// 新增修该
	const onFinish = async (values: any) => {
		// console.log(values)
		// 新增
		if (isTitle) {
			const res = await axios.post('/api/addRoleIds', {
			})
			console.log(res)
		}
		// 修改
		else {
			const res = await axios.post('/api/upDateUserList', {
				// nickname: values.nickName,
				userName: values.userName,
				deptName: values.deptName,
				phonenumber: values.phonenumber,
				userId,
			})
			// console.log(res)
			const { status, data } = res
			if (status === 200) {
				message.success(data.msg)
				getsuerList()
			}
		}
		setIsModalOpen(false)
		form.setFieldsValue('')
	};

	return (
		<div>
			<div>
				{content}
				<Button onClick={() => addRole()}>新增</Button>
				<Button>修改</Button>
				<Button>删除</Button>
				<Button>导出</Button>
			</div>
			<Radio.Group onChange={(e) => setSelectionType(e.target.value)} value={selectionType}>
				<Radio value="checkbox">Checkbox</Radio>
				<Radio value="radio">radio</Radio>
			</Radio.Group>
			<Divider />
			<Table<DataType>
				rowSelection={{ type: selectionType, ...rowSelection }}
				columns={columns}
				dataSource={userList}
				pagination={{}}
			/>
			<Modal
				title={isTitle ? '添加角色' : '修改角色'}
				closable={{ 'aria-label': 'Custom Close Button' }}
				open={isModalOpen}
				onOk={handleOk}
				onCancel={handleCancel}
			>
				<Form
					name="basic"
					form={form}
					labelCol={{ span: 8 }}
					wrapperCol={{ span: 16 }}
					style={{ maxWidth: 600 }}
					initialValues={{ remember: true }}
					onFinish={onFinish}
					autoComplete="off"
				>
					<Form.Item
						label="角色昵称"
						name="nickName"
						rules={[{ required: true, message: '请输入角色昵称' }]}
					>
						<Input />
					</Form.Item>
					<Form.Item
						label="用户昵称"
						name="userName"
						rules={[{ required: true, message: '请输入用户昵称!' }]}
					>
						<Input />
					</Form.Item>
					<Form.Item
						label="部门"
						name="deptName"
					>
						<Input />
					</Form.Item>
					<Form.Item
						label="手机号"
						name="cardNo"
					>
						<Input />
					</Form.Item>
					<Form.Item
						label="状态"
						name="status"
					>
						<Input />
					</Form.Item>
					{/* <Form.Item
						label="状态"
						name="status"
					>
						<Input />
					</Form.Item> */}
					<Form.Item label={null}>
						<Button type="primary" htmlType="submit">
							{isTitle ? '添加' : '保存'}
						</Button>
					</Form.Item>
				</Form>
			</Modal>
		</div>
	)
	//  roleName: string,
	//   authority: string,
	//   showIndex: number,
	//   status: 0 | 1,

}
export default Index